import {Descriptions, Modal} from 'antd';
import React from 'react';

interface VehicleUsageDetailProps {
  visible: boolean;
  onClose: () => void;
  data?: API.IVehicleUsage;
}

const VehicleUsageDetail: React.FC<VehicleUsageDetailProps> = ({visible, onClose, data}) => {
  const getValueLabel = (value: any, map: Record<string, string>) => {
    return map[value] || value || '-';
  };

  const usagePurposeMap = {
    '1': '教学',
    '2': '考试',
    '3': '维修',
    '4': '其他',
  };

  const usageStatusMap = {
    '1': '正常',
    '2': '异常',
  };

  return (
    <Modal
      title="车辆使用记录详情"
      width={800}
      open={visible}
      onCancel={onClose}
      footer={null}
      destroyOnClose
    >
      <Descriptions column={2} bordered>
        <Descriptions.Item label="记录ID">{data?.id || '-'}</Descriptions.Item>
        <Descriptions.Item label="车辆ID">{data?.vehicleId || '-'}</Descriptions.Item>
        <Descriptions.Item label="教练ID">{data?.coachId || '-'}</Descriptions.Item>
        <Descriptions.Item label="关联课时ID">{data?.lessonId || '-'}</Descriptions.Item>
        <Descriptions.Item label="开始时间">{data?.startTime || '-'}</Descriptions.Item>
        <Descriptions.Item label="结束时间">{data?.endTime || '-'}</Descriptions.Item>
        <Descriptions.Item label="开始里程">{data?.startMileage ? `${data.startMileage} 公里` : '-'}</Descriptions.Item>
        <Descriptions.Item label="结束里程">{data?.endMileage ? `${data.endMileage} 公里` : '-'}</Descriptions.Item>
        <Descriptions.Item label="行驶里程">
          {data?.startMileage && data?.endMileage ? `${(data.endMileage - data.startMileage).toFixed(2)} 公里` : '-'}
        </Descriptions.Item>
        <Descriptions.Item
          label="燃油消耗">{data?.fuelConsumption ? `${data.fuelConsumption} 升` : '-'}</Descriptions.Item>
        <Descriptions.Item label="使用用途">{getValueLabel(data?.usagePurpose, usagePurposeMap)}</Descriptions.Item>
        <Descriptions.Item label="使用状态">{getValueLabel(data?.usageStatus, usageStatusMap)}</Descriptions.Item>
        <Descriptions.Item label="异常描述" span={2}>
          {data?.abnormalDescription || '-'}
        </Descriptions.Item>
        <Descriptions.Item label="备注" span={2}>
          {data?.remark || '-'}
        </Descriptions.Item>
        <Descriptions.Item label="创建人">{data?.createdBy || '-'}</Descriptions.Item>
        <Descriptions.Item label="创建时间">{data?.createdAt || '-'}</Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default VehicleUsageDetail;
